、<template>
  <view>
    <u-modal
      v-model="show"
      :content="content"
      @confirm="catalogDeleteBatch"
      @cancel="show = false"
      :show-cancel-button="true"
    />
    <u-search
      @search="search"
      :show-action="false"
      input-align="center"
      height="70"
      :clearabled="true"
      placeholder="请输入目录名称"
      v-model="searchContent"
    />
		
		<u-modal v-model="isShowForm" @confirm="saveOrUpdate" @cancel="isShowForm = false" :title="isUpdate ? '编辑' : '新增'">
			<view class="slot-content" style="padding: 10rpx;">
				<u-input :border="true" placeholder="请输入目录名" v-model="name" type="text"/>
			</view>
		</u-modal>
    <u-empty v-if="isEmpty" text="暂无目录" mode="list" />
    <view v-if="isShow">
      <view class="message-list">
        <u-swipe-action
          :show="false"
          :index="i"
          :disabled="true"
          v-for="(c, i) in catalogList"
          :key="c.id"
        >
          <view class="uni-swipe-action">
            <u-checkbox
              v-model="c.checked"
              active-color="blue"
              :label-disabled="false"
              :size="45"
							:name="i"
							@change="checkBoxChange"
            >
              <view class="item">
                <block>
                  <view class="item-middle">
                    <text class="title">{{ c.name }}</text>
                    <view class="message"
                      >新建时间：{{ c.gmtModified | dateFormat }}</view
                    >
                  </view>
                </block>
              </view>
            </u-checkbox>
          </view>
        </u-swipe-action>
      </view>

      <u-loadmore v-if="!isEmpty" :status="status" />
    </view>
    <view class="catalog-bottom-btn">
      <view class="all-btn centerboth">
        <u-checkbox
          v-model="all"
          active-color="blue"
          :label-disabled="false"
          :size="45"
          @change="allChange"
          >全选</u-checkbox
        >
      </view>
      <view class="all-count centerboth">
        共选中{{ count }}个
      </view>
      <view class="catalog-btn-box centerboth">
        <view class="pass-btn  centerboth" @click="catalogSaveOrUpdate">{{ isUpdate ? '编辑' : '新增' }}</view>
        <view class="reject-btn  centerboth" @click="catalogDelete">删除</view>
      </view>
    </view>
  </view>
</template>

<script>
import avatarGroup from "@/components/avatar_group/avatar_group.vue";
import { mapGetters } from "vuex";
export default {
  name: "user-list",
  components: {
    avatarGroup,
  },
  data() {
    return {
      // 是否是创建者
      isEmpty: false,
      searchContent: "",
      catalogList: [],
      pageNum: 1,
      total: 0,
      pages: 0,
      status: "",
      show: false,
      content: "您确定要删除吗？",
      currentIndex: "",
      currentId: "",
      isShow: false,
      cid: "",
      all: false,
      catalogStatus: null,
			isUpdate: false,
			name: '',
			isShowForm: false
    };
  },
  computed: {
    ...mapGetters(["id"]),
    count(){
      if(this.all){
        return this.catalogList.length;
      }else {
        return this.catalogList.filter(val => val.checked).length;
      }
    }
  },
  async onLoad(e) {
    uni.$emit("setVuexUserInfo", { user: null, isLoginPage: false });
    this.cid = e.id;
    await this.initial();
  },
  async onPullDownRefresh() {
    this.catalogList = [];
    await this.initial();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  async onReachBottom() {
    this.pageNum = this.pageNum + 1;
    this.status = "loading";
    if (this.pageNum < this.pages) {
      await this.getCourseCatalogList();
      this.status = "loadmore";
    } else {
      this.pageNum = this.pageNum - 1;
      setTimeout(() => {
        this.status = "nomore";
      }, 1000);
    }
  },
  methods: {
		checkBoxChange(detail){
			const idx = parseInt(detail.name);
			const item = this.catalogList[idx];
			item.checked = detail.value;
			this.$set(this.catalogList, idx, item);
			const ids = this.catalogList.filter(val => val.checked).map(value => value.id);
			if(ids != null && ids.length == 1){
				this.isUpdate = true;
				this.currentId = ids[0];
				for(const cidx in this.catalogList){
					if(this.catalogList[cidx].id == this.currentId){
						this.currentIndex = cidx;
					}
				}
			}else{
				this.isUpdate = false;
			}
		},
    allChange(detail){
      if(detail.value){
        this.catalogList.forEach(value => {
          value.checked = true;
        })
      }else{
        this.catalogList.forEach(value => {
          value.checked = false;
        })
      }
    },
    catalogSaveOrUpdate(){
			if(this.isUpdate){
				this.name = this.catalogList[this.currentIndex].name;
			}
			this.isShowForm = true;
    },
		async saveOrUpdate(){
			const catalogForm = {
				name: this.name
			}
			if(this.isUpdate){
				if(this.$u.test.isEmpty(this.currentId)){
					this.$u.toast("请刷新页面重试！")
					return;
				}
				catalogForm.id = this.currentId;
			}else {
				catalogForm.courseId = this.cid;
			}
			this.$u.api.createCatalog(catalogForm).then((res) => {
            if (res.code === 200) {
              if(this.isUpdate){
								res.data.checked = true;
								this.$set(this.catalogList, this.currentIndex, res.data);
							}else{
								this.catalogList.push(res.data)
								this.isEmpty = false;
								this.isShow = true;
							}
            }
        });
		},
	 catalogDelete(){
     this.show = true;
    },
    async catalogDeleteBatch(){
      const ids = this.catalogList.filter(val => val.checked).map(value => value.id);
      if(ids == null || ids.length == 0){
				return;
			}
      const res = await this.$u.api.deleteBatchCatalog(this.cid, ids.join(','));
      if(res.code == 200){
        this.$u.toast("删除成功");
        this.initial();
      }else{
        this.$u.toast("删除失败");
      }
    },
    async initial() {
      // 初始化
      this.pageNum = 1;
      this.total = 0;
      this.searchContent = "";
      await this.getCatalogs();
    },
    async search() {
      // 搜索成功再显示
      this.isShow = false;
      this.pageNum = 1;
      await this.getCatalogs();
    },
    // 查询目录
    async getCatalogs() {
      const res = await this.$u.api.getCatalogByCourseId(this.cid, {
        pageNum: this.pageNum,
        pageSize: 10,
				searchContent: this.searchContent
      });
      if (res.total === 0) {
        this.isEmpty = true;
				this.isShow = false;
      } else {
        const data = res.data;
        for (const index in data) {
          data[index].checked = false;
        }
        if (this.pageNum > 1) {
          // 第二页用拼接
          this.catalogList.concat(data);
        } else {
          // 第一页直接赋值
          this.catalogList = data;
          this.isShow = true;
        }
        this.isEmpty = false;
        this.total = res.total;
        this.pages = res.pages;
      }
    }
  },
  
};
</script>

<style lang="scss">
.uni-swipe-action {
  width: 100%;
  padding-left: 10rpx;
}

.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10upx 16upx;
  background-color: #fff;
  border-bottom: 1px solid rgb(243, 243, 243);

  &.stick {
    background-color: rgba(243, 236, 221, 0.5);
  }

  .item-left {
    text-align: center;

    .image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      background-color: #eee;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      background: #4191ea;
      border-radius: 50%;
      overflow: hidden;

      .iconfont {
        width: 100rpx;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        color: #fff;
        font-size: 40rpx;
      }
    }
  }

  .item-middle {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 15rpx;
    overflow: hidden;

    .title {
      width: 100%;
      color: #000;
      font-family: "微软雅黑";
      font-weight: 400;
      font-size: 37rpx;
      height: 50rpx;
      line-height: 60rpx;
      overflow: hidden;
      /*自动隐藏文字*/
      text-overflow: ellipsis;
      /*文字隐藏后添加省略号*/
      white-space: nowrap;
      /**强制不换行*/
    }

    .message {
      width: 100%;
      font-family: "微软雅黑";
      color: #808080;
      height: 50rpx;
      font-weight: bold;
      line-height: 40rpx;
      font-size: 27rpx;
    }
  }
}

.catalog-bottom-btn {
  position: fixed;
  width: 100%;
  height: 100rpx;
  background: #ffffff;
  left: 0;
  bottom: 0;
  z-index: 6;
  box-shadow: 0px -5px 10px -5px #d0d0d0;
  padding: 0 300rpx 0 40rpx;
  display: flex;
  justify-content: space-between;
  .all-btn {
    height: 100%;
    float: left;
  }
  .all-count {
    margin-right: 60rpx;
  }
  .catalog-btn-box {
    position: absolute;
    right: 0;
    height: 100%;
    z-index: 9;
    top: 0;
    view {
      width: 150rpx;
      height: 100%;
      cursor: pointer;
    }
  }
  .reject-btn {
    background: red;
    color: #ffffff;
  }
  .pass-btn {
    background: $u-type-primary;
    color: #ffffff;
  }
}
.centerboth {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
